import { t } from 'i18next'
import { RightWrap } from '../../components'
import {
	AddIcon,
	ArrowIcon,
	EyeIcon,
	MinusIcon,
	StyledChooseDialog,
	StyledOverrideDialog,
	StyledOverrideDialogFooter,
	StyledWrap,
} from './style'
import { Button, Modal, RadioGroup, Select, Space } from '@kedacom/react-next'
import { useCameraRcStore } from './store'
import shallow from 'zustand/shallow'
import Alert from '@/components/Alert'
import { useEffect } from 'react'
import { useMonitorStore } from '../monitor/store'
import { useMccStore } from '../../store'
import { useGlobalStore } from '@/store/global'

export default function CameraRc() {
	const {
		mt,
		mt_id,
		sourceList,
		curSource,
		positionList,
		curPosition,
		isOverrideDialogShow,
		isChooseDialogShow,
		choosePosition,
		isToggleIconActive,
		update,
		setVideoSource,
		changePosition,
		savePosition,
		fetchGetVideoSourceList,
		fetchGetPosition,
		actionRepeat,
		fetchStartMove,
	} = useCameraRcStore(
		(state) => ({
			mt: state.mt,
			mt_id: state.mt_id,
			sourceList: state.sourceList,
			curSource: state.curSource,
			positionList: state.positionList,
			curPosition: state.curPosition,
			isOverrideDialogShow: state.isOverrideDialogShow,
			isChooseDialogShow: state.isChooseDialogShow,
			choosePosition: state.choosePosition,
			isToggleIconActive: state.isToggleIconActive,
			update: state.update,
			setVideoSource: state.setVideoSource,
			changePosition: state.changePosition,
			savePosition: state.savePosition,
			fetchGetVideoSourceList: state.fetchGetVideoSourceList,
			fetchGetPosition: state.fetchGetPosition,
			actionRepeat: state.actionRepeat,
			fetchStartMove: state.fetchStartMove,
		}),
		shallow
	)
	const { needMustUpdateExeVersion, appCheckHasReadyAndStart, showUpdateDialog, closeCamera, showNativeVideo } =
		useMonitorStore(
			(state) => ({
				needMustUpdateExeVersion: state.NeedMustUpdateExeVersion,
				appCheckHasReadyAndStart: state.appCheckHasReadyAndStart,
				showUpdateDialog: state.showUpdateDialog,
				closeCamera: state.closeCamera,
				showNativeVideo: state.showNativeVideo,
			}),
			shallow
		)

	const SWITCH = useGlobalStore((state) => state.SWITCH)

	useEffect(() => {
		fetchGetVideoSourceList()
		fetchGetPosition()
		return () => {
			//exe:关闭远摇
			closeCamera()
		}
	}, [mt_id])
	const handleBack = () => {
		useMccStore.getState().setCurPage('mcc_main')
	}
	const closeChooseDialog = () => {
		update({ isChooseDialogShow: false, choosePosition: '-1' })
	}
	//远摇显示隐藏
	const toggleRemote = () => {
		if (appCheckHasReadyAndStart()) {
			if (isToggleIconActive) {
				//关闭远摇
				closeCamera()
			} else {
				if (needMustUpdateExeVersion) {
					//更新
					showUpdateDialog(false)
					return
				}
				showNativeVideo(mt_id, 1)
			}
		}
	}
	return (
		<>
			<RightWrap title={t('摄像机远遥')} onBack={handleBack}>
				<StyledWrap>
					<div className="line-wrap">
						<div className="label">{t('终端名称')}</div>
						<div className="text">{mt?.name || mt?.e164 || mt?.account}</div>
						{!!SWITCH.monitor && (
							<EyeIcon
								className={`toggle-remote ${isToggleIconActive ? 'active' : ''}`}
								onClick={toggleRemote}
							/>
						)}
					</div>
					<div className="line-wrap">
						<div className="label">{t('视频源')}</div>
						<Select
							width={200}
							options={sourceList}
							value={curSource}
							onChange={(e, v) => setVideoSource(v)}
						/>
					</div>
					<div className="line-wrap">
						<div className="label">{t('预置位')}</div>
						<Select
							width={100}
							options={positionList}
							value={curPosition}
							onChange={(e, v, o) => changePosition(o.value, o.label)}
						/>
						<Button
							className="btn save-position-btn"
							width={90}
							onClick={() => {
								if (curPosition === '-1' || curPosition.indexOf('_unUsed') !== -1) {
									update({ isChooseDialogShow: true })
								} else {
									update({ isOverrideDialogShow: true })
								}
							}}
						>
							{t('保存预置位')}
						</Button>
					</div>
					<div className="action-wrap">
						<ArrowIcon
							className="up"
							onMouseDown={() => {
								actionRepeat('cameraMoveUp', 'start')
							}}
							onMouseUp={() => {
								actionRepeat('cameraMoveUp', 'stop')
							}}
							onMouseLeave={() => {
								actionRepeat('cameraMoveUp', 'stop')
							}}
						></ArrowIcon>
						<ArrowIcon
							className="right"
							onMouseDown={() => {
								actionRepeat('cameraMoveRight', 'start')
							}}
							onMouseUp={() => {
								actionRepeat('cameraMoveRight', 'stop')
							}}
							onMouseLeave={() => {
								actionRepeat('cameraMoveRight', 'stop')
							}}
						></ArrowIcon>
						<ArrowIcon
							className="left"
							onMouseDown={() => {
								actionRepeat('cameraMoveLeft', 'start')
							}}
							onMouseUp={() => {
								actionRepeat('cameraMoveLeft', 'stop')
							}}
							onMouseLeave={() => {
								actionRepeat('cameraMoveLeft', 'stop')
							}}
						></ArrowIcon>
						<ArrowIcon
							className="down"
							onMouseDown={() => {
								actionRepeat('cameraMoveDown', 'start')
							}}
							onMouseUp={() => {
								actionRepeat('cameraMoveDown', 'stop')
							}}
							onMouseLeave={() => {
								actionRepeat('cameraMoveDown', 'stop')
							}}
						></ArrowIcon>
					</div>
					<div className="line-wrap">
						<div className="label">{t('焦距')}</div>
						<Space space={4}>
							<Button
								className="btn focusout"
								width={64}
								onMouseDown={() => {
									actionRepeat('focusOut', 'start')
								}}
								onMouseUp={() => {
									actionRepeat('focusOut', 'stop')
								}}
								onMouseLeave={() => {
									actionRepeat('focusOut', 'stop')
								}}
							>
								<MinusIcon className="minus" />
							</Button>
							<Button
								className="btn focusin"
								width={64}
								onMouseDown={() => {
									actionRepeat('focusIn', 'start')
								}}
								onMouseUp={() => {
									actionRepeat('focusIn', 'stop')
								}}
								onMouseLeave={() => {
									actionRepeat('focusOut', 'stop')
								}}
							>
								<AddIcon className="add" />
							</Button>
							<Button
								className="btn autofocus"
								width={64}
								onClick={() => {
									fetchStartMove('autofocus')
								}}
							>
								{t('自动')}
							</Button>
						</Space>
					</div>
					<div className="line-wrap">
						<div className="label">{t('视野')}</div>
						<Space space={4}>
							<Button
								className="btn zoom-out"
								width={64}
								onMouseDown={() => {
									actionRepeat('zoomOut', 'start')
								}}
								onMouseUp={() => {
									actionRepeat('zoomOut', 'stop')
								}}
								onMouseLeave={() => {
									actionRepeat('zoomOut', 'stop')
								}}
							>
								<MinusIcon className="minus" />
							</Button>
							<Button
								className="btn zoom-in"
								width={64}
								onMouseDown={() => {
									actionRepeat('zoomIn', 'start')
								}}
								onMouseUp={() => {
									actionRepeat('zoomIn', 'stop')
								}}
								onMouseLeave={() => {
									actionRepeat('zoomIn', 'stop')
								}}
							>
								<AddIcon className="add" />
							</Button>
						</Space>
					</div>
					<div className="line-wrap">
						<div className="label">{t('亮度')}</div>
						<Space space={4}>
							<Button
								className="btn bright-down"
								width={64}
								onMouseDown={() => {
									actionRepeat('brightDown', 'start')
								}}
								onMouseUp={() => {
									actionRepeat('brightDown', 'stop')
								}}
								onMouseLeave={() => {
									actionRepeat('brightDown', 'stop')
								}}
							>
								<MinusIcon className="minus" />
							</Button>
							<Button
								className="btn bright-up"
								width={64}
								onMouseDown={() => {
									actionRepeat('brightUp', 'start')
								}}
								onMouseUp={() => {
									actionRepeat('brightUp', 'stop')
								}}
								onMouseLeave={() => {
									actionRepeat('brightUp', 'stop')
								}}
							>
								<AddIcon className="add" />
							</Button>
						</Space>
					</div>
				</StyledWrap>
			</RightWrap>
			<Modal
				className="save-position-dialog"
				open={isOverrideDialogShow}
				title={t('预置位保存')}
				width={400}
				height={190}
				footer={
					<StyledOverrideDialogFooter>
						<Space space={6} className="btns-wrap">
							<Button
								onClick={() => {
									savePosition(curPosition)
									update({ isOverrideDialogShow: false })
								}}
							>
								{t('覆盖当前')}
							</Button>
							<Button
								onClick={() => {
									update({ isChooseDialogShow: true, isOverrideDialogShow: false })
								}}
							>
								{t('另存为')}
							</Button>
							<Button
								onClick={() => {
									update({ isOverrideDialogShow: false })
								}}
							>
								{t('取消')}
							</Button>
						</Space>
					</StyledOverrideDialogFooter>
				}
				onCancel={() => {
					update({ isOverrideDialogShow: false })
				}}
			>
				<StyledOverrideDialog>{t('当前摄像机置位保存方式选择...')}</StyledOverrideDialog>
			</Modal>
			<Modal
				className="choose-position-dialog"
				open={isChooseDialogShow}
				title={t('选择预置位')}
				width={400}
				height={260}
				onOk={() => {
					if (choosePosition.indexOf('_unUsed') !== -1) return
					if (choosePosition === '-1') {
						Alert(t('请选择一个预置位'))
					} else {
						savePosition(choosePosition)
						closeChooseDialog()
					}
				}}
				onCancel={closeChooseDialog}
				okText={t('确定')}
				cancelText={t('取消')}
			>
				<StyledChooseDialog>
					<RadioGroup
						direction="column"
						value={choosePosition}
						options={positionList
							.filter((item) => item.value !== '-1')
							.map((item) => ({ ...item, height: 25 }))}
						onChange={(e, v) => {
							update({ choosePosition: v })
						}}
					/>
				</StyledChooseDialog>
			</Modal>
		</>
	)
}
